<template>
  <div class="hello">
    <div class="loginBox" :style="{height:winHeight+'px',paddingTop:(winHeight-600)/2+'px'}">
      <div class="loginFrom  animated slideInDown">
        <div class="leftBox">
          <img src="/static/img/logo1@4x.png" alt="">
          <input type="text" placeholder="用户名" v-model="username">
          <input type="password" placeholder="密码" v-model="userpass">
          <a @click.stop="login">登陆</a>
        </div>
        <!-- <div class="rightBox">
                <img src="/static/img/rightBox.jpg" alt="">
            </div> -->
      </div>
      <span class="footerTitles"> Copyright © 2006-2017 智付云支付</span>
    </div>
  </div>
</template>

<script>
import router from "../router/index";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      winHeight: $(window).innerHeight(),
      username: "",
      userpass: ""
    };
  },
  created: {
    logins() {
      return this.$store.state.login;
    }
  },

  methods: {
    login: function() {
      localStorage.setItem("name", this.username);
      localStorage.setItem("pass", this.userpass);

      console.log(this.username, this.userpass);
      $.ajax({
        url: BASE_URL+"sessions",
        type: "POST",
        data: {
          username: this.username,
          password: this.userpass,
          rememberMe: false
        },
        success: function(data) {
          console.log(data);
          if (data.user) {
            localStorage.setItem('userinfo',JSON.stringify(data.user))
            router.push({
              path: "/home"
            });
          }
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
